<template>
  <Popup v-model:show="showPopup" position="bottom" round :overlay="false">
    <div class="title">
      <span>打字下注的规则</span>
      <Icon class="popup-icon" name="arrow-down" @click="showPopup = false" />
    </div>

    <div class="popup-content">
      <div v-for="(item, index) in rulesList" :key="index">
        <div class="des">
          <span>{{ item.name }}</span>
          <span>{{ item.desc }}</span>
        </div>
        <div class="example">{{ item.sample }}</div>
      </div>
    </div>
  </Popup>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getBetRules } from '@/api'
import { Popup, Icon } from 'vant'

type Props = {
  gameType: string
}

const props = defineProps<Props>()

const showPopup = ref(false)
const rulesList = ref([])

const getList = async () => {
  try {
    const { data } = await getBetRules({
      gameCode: props.gameType,
    })

    rulesList.value = data.descriptions
  } catch {
    /* empty */
  }
}

const open = () => {
  if (showPopup.value) {
    showPopup.value = false
    return
  }

  showPopup.value = true
  rulesList.value = []
  getList()
}

defineExpose({
  open,
})
</script>

<style lang="less" scoped>
.title {
  position: relative;
  padding: 8px 0;
  height: 40px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  box-sizing: border-box;
  background: linear-gradient(270deg, #6c4fe0 0%, #3d35c6 100%);
  border-radius: 15px 15px 0 0;

  .popup-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 700;
  }
}

.popup-content {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  min-height: 90px;
  padding: 14px 16px;
  text-align: left;
  box-sizing: border-box;
  color: #94abff;
  background: rgba(10, 12, 34, 1);

  .des {
    font-size: 12px;
  }

  .example {
    color: #ff5c52;
    font-size: 13px;
  }

  > div {
    margin-bottom: 6px;

    &:nth-last-of-type(1) {
      margin-bottom: 0;
    }
  }
}
</style>
